<template>
    <div v-loading="loading">
        <el-card>
            <div class="card-header">
                <span>环境</span>
            </div>
            <el-form :model="formSetting" :rules="rules" ref="formRef1">
                <el-form-item label="客户名" :label-width="formLabelWidth" prop="company">
                    <el-input v-model="formSetting.company" size="large" clearable />
                </el-form-item>
                <el-form-item label="简称" :label-width="formLabelWidth" prop="abbreviation">
                    <el-input v-model="formSetting.abbreviation" size="large" clearable />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card>
            <div class="card-header">
                <span>数据库</span>
            </div>
            <el-form :model="formSetting" :rules="rules" ref="formRef2">
                <el-form-item label="host" :label-width="formLabelWidth" prop="host">
                    <el-input v-model="formSetting.host" size="large" clearable />
                </el-form-item>
                <el-form-item label="端口" :label-width="formLabelWidth" prop="port">
                    <el-input v-model="formSetting.port" size="large" clearable />
                </el-form-item>
                <el-form-item label="账号" :label-width="formLabelWidth" prop="user">
                    <el-input v-model="formSetting.user" size="large" clearable />
                </el-form-item>
                <el-form-item label="口令" :label-width="formLabelWidth" prop="password">
                    <el-input type="password" v-model="formSetting.password" size="large" clearable />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card>
            <div class="card-header">
                <span>API</span>
            </div>
            <el-form :model="formSetting" :rules="rules" ref="formRef3">
                <el-form-item label="ip地址" :label-width="formLabelWidth" prop="ip">
                    <el-input v-model="formSetting.ip" size="large" clearable />
                </el-form-item>
                <el-form-item label="端口" :label-width="formLabelWidth" prop="webport">
                    <el-input v-model="formSetting.webport" size="large" clearable />
                </el-form-item>
                <el-form-item label="文件json地址" :label-width="formLabelWidth" prop="openapi_url">
                    <el-input v-model="formSetting.openapi_url" size="large" clearable />
                </el-form-item>
                <el-form-item label="swagger入口" :label-width="formLabelWidth" prop="docs_url">
                    <el-input type="password" v-model="formSetting.docs_url" size="large" clearable />
                </el-form-item>
                <el-form-item label="接口名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="formSetting.title" size="large" clearable />
                </el-form-item>
                <el-form-item label="接口介绍" :label-width="formLabelWidth" prop="description">
                    <el-input v-model="formSetting.description" size="large" clearable />
                </el-form-item>
            </el-form>
        </el-card>
    </div>
  
    <div class="btn-box">
        <el-button size="large" @click="defaultClick">设为默认值</el-button>
        <el-button size="large" type="primary" @click="saveClick">保存</el-button>
    </div>
  </template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import sysSetting from "../../api/sysSetting"
const hasToken = <string>localStorage.getItem('accessToken');
const loading = ref(false);
const formLabelWidth = '110px';

//定义类型
interface defineSetting {
    company?: string | null,
    abbreviation?: string | null,
    host?: string | null,
    port?: string | null,
    user?: string | null,
    password?: string | null,
    ip?: string | null,
    webport?: number | null,
    openapi_url?: string | null,
    docs_url?: string | null,
    title?: string | null,
    description?: string | null,
};
//默认参数
const formSetting = ref<defineSetting>({
    company: '',
    abbreviation: '',
    host:'',
    port:'',
    user:'',
    password:'',
    ip:'',
    webport:0,
    openapi_url:'',
    docs_url:'',
    title:'',
    description:''
});
//储存所有数据，用作默认 
const allData = reactive({
    db:{
        db:'',
        port:'',
        user:'',
        password:'',
        host:''
    },
    web_api:{
        version:'',
        ip:'',
        port: 0,
        openapi_url:'',
        docs_url:'',
        title:'',
        description:''
    },
    service_info:{
        company:'',
        abbreviation:''
    }

})
//获取配置信息
// const getTableData = debounce(() => {
    const getTableData = () => {
    
    loading.value = true; // 开始加载
    sysSetting.getConfigInfo(hasToken).then(res => {
        // console.log('res', res);
        Object.assign(allData , res.data)
        formSetting.value = {
            company: res.data.service_info.company,
            abbreviation: res.data.service_info.abbreviation,
            host: res.data.db.host,
            port: res.data.db.port,
            user: res.data.db.user,
            password: res.data.db.password,
            ip: res.data.web_api.ip,
            webport: res.data.web_api.port,
            openapi_url: res.data.web_api.openapi_url,
            docs_url: res.data.web_api.docs_url,
            title: res.data.web_api.title,
            description: res.data.web_api.description,
        }
    }).finally(() => {
        loading.value = false; // 开始加载
        // ElMessage.error('获取配置信息失败');
    });
};
// },300)
// 表单校验规则
const rules = {
    company: [{ required: true, message: '请输入客户名', trigger: 'blur' }],
    abbreviation: [{ required: true, message: '请输入简称', trigger: 'blur' }],
    host: [{ required: true, message: '请输入host', trigger: 'blur' }],
    port: [{ required: true, message: '请输入端口', trigger: 'blur' }],
    user: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入口令', trigger: 'blur' }],
    ip: [{ required: true, message: '请输入ip地址', trigger: 'blur' }],
    webport: [{ required: true, message: '请输入端口', trigger: 'blur' }],
    openapi_url: [{ required: true, message: '请输入文件json地址', trigger: 'blur' }],
    docs_url: [{ required: true, message: '请输入swagger入口', trigger: 'blur' }],
    title: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
    description: [{ required: true, message: '请输入接口介绍', trigger: 'blur' }],
};
    const formRef1 = ref(null);
    const formRef2 = ref(null);
    const formRef3 = ref(null);
//===================================================
//===================================================
    // 点击保存
const saveClick =()=>{
    // console.log('allData',allData);


  // 组合编辑数据
  const obj = {
            service_info: {
            company: formSetting.value.company,
            abbreviation: formSetting.value.abbreviation
            },
            db: {
            db: allData.db.db,
            host: formSetting.value.host,
            password: formSetting.value.password,
            port: formSetting.value.port,
            user: formSetting.value.user
            },
            web_api: {
            ip: formSetting.value.ip,
            port: formSetting.value.webport,
            openapi_url: formSetting.value.openapi_url,
            docs_url: formSetting.value.docs_url,
            title: formSetting.value.title,
            description: formSetting.value.description,
            version: allData.web_api.version
            }
        };

        formRef1.value.validate((valid1: boolean) => {
            if (valid1) {
                formRef2.value.validate((valid2: boolean) => {
                    if (valid2) {
                        formRef3.value.validate((valid3: boolean) => {
                            if (valid3) {
                                sysSetting.updateSet(hasToken, obj).then(res => {
                                    ElMessage.success('保存成功');
                                    getTableData();
                                }).catch(error => {
                                    ElMessage.error('保存失败');
                                });
                            } else {
                                ElMessage.error('信息未填写完整');
                            }
                        });
                    } else {
                        ElMessage.error('信息未填写完整');
                    }
                });
            } else {
                ElMessage.error('信息未填写完整');
            }
        });
        }



//设为默认值
const defaultClick =()=>{
    // console.log('allData',allData);
    
    formSetting.value = {
            company: allData.service_info.company,
            abbreviation: allData.service_info.abbreviation,
            host: allData.db.host,
            port: allData.db.port,
            user:allData.db.user,
            password: allData.db.password,
            ip: allData.web_api.ip,
            webport:allData.web_api.port,
            openapi_url: allData.web_api.openapi_url,
            docs_url: allData.web_api.docs_url,
            title: allData.web_api.title,
            description: allData.web_api.description,
        }
}

//加载函数
onMounted(() => {
//     const getTableData = debounce(() => {
// });
    getTableData()

})

</script>

<style scoped>
.el-card {
    width: 100%;
    margin-bottom: 30px;
}

.card-header {
    text-align: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.btn-box {
    float: right;
}

/* :deep(.el-form-item__label) {
    justify-content: flex-start;
} */
</style>